<template>
        <div id="shoplist">
                <div class="shoplist_">
                        <ul>
                                <li>
                                        <el-button>全部订单&nbsp;&nbsp; 582</el-button>
                                </li>
                                <li>
                                        <el-button>待付款&nbsp;&nbsp; 8</el-button>
                                </li>
                                <li>
                                        <el-button>待使用&nbsp; &nbsp; 41</el-button>
                                </li>
                                <li>
                                        <el-button>已取消&nbsp;&nbsp; 21</el-button>
                                </li>
                                <li>
                                        <el-button>已完成&nbsp;&nbsp; 495</el-button>
                                </li>
                                <li>
                                        <el-button>雪票&nbsp;&nbsp; 392</el-button>
                                </li>
                                <li>
                                        <el-button>教练&nbsp; &nbsp; 54</el-button>
                                </li>
                                <li>
                                        <el-button>酒店&nbsp;&nbsp; 58</el-button>
                                </li>
                                <li>
                                        <el-button>卡类&nbsp; 78</el-button>
                                </li>
                        </ul>

                </div>
                <div class="shoplist_table">
           <transition name="el-zoom-in-top"><Setcard v-if="order_show_card" class="order_card"></Setcard></transition>
                        <div class="shoptext">订单列表</div>
                        <ul class="shop_icon">
                    <transition name="el-fade-in-linear"> <li v-show="sousuok"><el-input v-model="input1" class="sousuo"></el-input></li></transition>
                                <li><img @click="getsousuo" src="../image/放大镜.png" alt=""></li>

                                <li><img @click="order_shuaxin" src="../image/24px.png" alt=""></li>
                                <li><img @click="get_show_card" src="../image/16px.png" alt=""></li>
                        </ul>

                        <div class="el_table_shop">
                                <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                        style="width: 100%" ref="multipleTable" tooltip-effect="dark"
                                       >

                                        <el-table-column prop="date" label="订单编号" width="180">
                                        </el-table-column>
                                        <el-table-column prop="name" label="名称" width="180">
                                        </el-table-column>
                                        <el-table-column prop="fenlei" label="分类">
                                        </el-table-column>
                                        <el-table-column prop="money" label="金额">
                                        </el-table-column>
                                        <el-table-column prop="zhuangtai" label="状态">

                                        </el-table-column>
                                        <el-table-column prop="time" width="100" sortable label="下单时间">
                                        </el-table-column>
                                        <el-table-column label="买家">
                                                <template slot-scope="scope">
                                                        <span style="margin-left: 2px">{{ scope.row.shangxiajia
                                                                }}</span>
                                                </template>
                                        </el-table-column>
                                        <el-table-column label="手机号">
                                                <template slot-scope="scope">

                                                        <span class="caozuo" style="margin-left: 2px">{{
                                                                scope.row.caozuo }}</span>
                                                </template>
                                        </el-table-column>
                                        <el-table-column prop="address" label="查看">
                                                <el-button>详情</el-button>
                                        </el-table-column>
                                </el-table>
                                <el-button>多选</el-button>
                                <div class="fenye">
                                        <el-pagination background @current-change="current_change"
                                                layout="prev, pager, next" :total="total">
                                        </el-pagination>
                                </div>

                        </div>
                </div>
        </div>
</template>
<script>
        import Setcard from "../components/Setcard.vue"
        export default {
                components:{Setcard},
                data() {
                        return {
                                order_show_card:false,
                                input1:"",
                                sousuok:false,
                                tableData: [],
                                multipleSelection: [],
                                total: 160,
                                pagesize: 9,
                                currentPage: 1,
                                tableData: [{
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "待使用",
                                        money: "380",
                                        zhuangtai: "待使用",
                                        time: "2021/2/18",
                                        shangxiajia: "白岩树",
                                        caozuo: "13584572546",
                                }, {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票",
                                        money: "380",
                                }, {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票",
                                        money: "380",
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },
                                {
                                        date: 'XP184217',
                                        name: '1小时滑雪体验票',
                                        address: '',
                                        fenlei: "雪票"
                                },


                                ]
                        }
                },
                methods: {
                        addUser() {
                                this.$http({
                                        method: 'GET',
                                        url: 'http://127.0.0.1:8080/api/users',
                                }).then(res => {
                                        console.log(res);
                                        if (!res.data.errno) {
                                                this.tableData = res.data.data.users;
                                                this.total = res.data.totalnum;
                                        }
                                })
                                        .catch(function (error) {
                                                console.log(error);
                                        });
                        },

                        current_change: function (currentPage) {
                                this.currentPage = currentPage;
                        },
                        getsousuo(){
                                this.sousuok=!this.sousuok
                                this.order_show_card=false
                        },
                        order_shuaxin(){
                                window.location.reload();
                        },
                        get_show_card(){
                                this.order_show_card=!this.order_show_card
                                this.sousuok=false
                        },
                        mounted: function () {
                                this.addUser();
                        }
                }

        }
</script>
<style scoped>
.order_card{
position: absolute;
right: 20px;
z-index: 2;
top: 150px;
}
          div /deep/  .el-input__inner {
    -webkit-appearance: none;
    background-color:#F2F2F2;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    /* height: 10px; */
    height: 24px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
        .div /deep/ element.style {}

        .el-table th.el-table__cell>.cell {
                display: inline-block;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: relative;
                vertical-align: middle;
                padding-left: 10px;
                padding-right: 10px;
                width: 100%;
                color: black;
        }


        .fenye {
                position: absolute;
                right: 0;
                bottom: 60px;
        }

        div /deep/ tr.el-table__row {
                height: 56px;
        }

        .el_table_shop {
                width: 1184px;
                height: 744px;
                /* background-color: skyblue; */
                margin-left: 20px;
                position: relative;
        }

        .shop_icon {
                list-style: none;
                display: inline-block;
                float: right;
                margin-top: 20px;
                margin-right: 20px;
        }

        .shop_icon>li {
                padding: 0 5px;
                display: inline-block;
                cursor: pointer;
        }

        #shoplist {
                overflow: hidden;
        }

        .shoptext {
                font-size: 20px;
                font-weight: 700;
                margin-top: 20px;
                margin-left: 20px;
                display: inline-block;
        }

        .shoplist_table {
                width: 1232px;
                height: 750px;
                background-color: #fff;
                margin-top: 25px;
                overflow: hidden;
        }

        .shoplist_ {
                width: 1077px;
                height: 36px;
                /* background-color: pink; */
                margin-top: 40px;
                margin-left: 15px;
        }

        .shoplist_>ul {
                list-style: none;

        }

        .shoplist_>ul>li {
                float: left;
                margin-left: 10px;
        }
</style>